import React from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
import { useRouter } from 'expo-router';
import { useRoute } from '@react-navigation/native';


interface PaymentParams {
  amount?: number; // 定义 amount 属性
}

export default function Success() {
  const router = useRouter();

  // 为 useRoute() 返回值定义类型
  const route = useRoute();
  const response = route.params as PaymentParams; // 类型断言

  // 获取支付金额，默认值为 0
  const amount = response?.amount || 0;

  return (
    <View style={styles.container}>
      {/* Header 区域 */}
      <View style={styles.header}>
        <Text style={styles.successText}>支付成功！</Text>
        <Text style={styles.amountText}>¥{amount}</Text>
      </View>

      {/* 底部按钮区域 */}
      <View style={styles.footer}>
        <TouchableOpacity style={styles.backButton} onPress={() => router.push('/')}>
          <Text style={styles.backButtonText}>返回首页</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  // Header 样式
  header: {
    alignItems: 'center',
    marginBottom: 30,
    marginTop: 70,
  },
  successImage: {
    width: 80,
    height: 80,
    marginBottom: 10,
  },
  successText: {
    fontSize: 22,
    fontWeight: 'bold',
    color: '#4CAF50',
  },
  amountText: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
    marginTop: 20,
    marginLeft: -10,
  },
  footer: {
    alignItems: 'center',
    paddingVertical: 20,
    borderTopWidth: 1,
    borderColor: '#eee',
    marginTop: 280,
  },
  backButton: {
    backgroundColor: '#4CAF50',
    paddingVertical: 12,
    paddingHorizontal: 40,
    borderRadius: 8,
  },
  backButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});
